<!DOCTYPE html>
<html lang="en" >

<head>
  <title>Expressive Robot Face for Tablet</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="buttons">
    <button onclick="eyes.startBlinking()">Start Blinking</button>
    <button onclick="eyes.stopBlinking()">Stop Blinking</button>
    <button onclick="eyes.blink()" >Blink</button>
    <button onclick="eyes.express({type: 'happy'})" >Happy</button>
    <button onclick="eyes.express({type: 'sad'})" >Sad</button>
    <button onclick="eyes.express({type: 'angry'})" >Mad</button>
    <button onclick="eyes.express({type: 'focused'})" >Focused</button>
    <button onclick="eyes.express({type: 'confused'})" >Confused</button>

  </div>
  <div class="face">
    <div class="eye left">
      <div class="eyelid upper"></div>
      <div class="eyelid lower"></div>
    </div>
    <div class="eye right">
      <div class="eyelid upper"></div>
      <div class="eyelid lower"></div>
    </div>
  </div>

  <script  src="index.js"></script>
</body>
